<template>
  <div class="brand-demo-container">
    <h1>品牌走马灯组件示例</h1>
    
    <!-- 基础品牌走马灯 -->
    <section class="demo-section">
      <h2>基础品牌走马灯</h2>
      <BrandCarousel 
        :brands="brandList" 
        :visibleItems="5"
        @click="handleBrandClick"
      />
    </section>
    
    <!-- 显示品牌名称的走马灯 -->
    <section class="demo-section">
      <h2>显示品牌名称的走马灯</h2>
      <BrandCarousel 
        :brands="brandList" 
        :visibleItems="4" 
        :showBrandName="true"
        title="赞助商品牌"
      />
    </section>
    
    <!-- 自定义控制的走马灯 -->
    <section class="demo-section">
      <h2>自定义控制的走马灯</h2>
      <BrandCarousel 
        ref="customCarousel"
        :brands="brandList" 
        :visibleItems="6" 
        :autoPlay="false"
        :scrollItems="2"
      />
      <div class="custom-controls">
        <button @click="prevSlide">上一组</button>
        <button @click="nextSlide">下一组</button>
        <button @click="goToSlide(0)">回到开始</button>
        <button @click="toggleAutoPlay">{{ isAutoPlaying ? '停止' : '开始' }}自动播放</button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import BrandCarousel from '../components/common/BrandCarousel/index.vue';

// 品牌列表数据
const brandList = ref([
  {
    name: '阿迪达斯',
    imageUrl: 'https://picsum.photos/200/100?random=1',
    link: 'https://www.adidas.com'
  },
  {
    name: '耐克',
    imageUrl: 'https://picsum.photos/200/100?random=2',
    link: 'https://www.nike.com'
  },
  {
    name: '安踏',
    imageUrl: 'https://picsum.photos/200/100?random=3',
    link: 'https://www.anta.com'
  },
  {
    name: '李宁',
    imageUrl: 'https://picsum.photos/200/100?random=4',
    link: 'https://www.lining.com'
  },
  {
    name: '特步',
    imageUrl: 'https://picsum.photos/200/100?random=5',
    link: 'https://www.xtep.com'
  },
  {
    name: '匹克',
    imageUrl: 'https://picsum.photos/200/100?random=6',
    link: 'https://www.peak.com'
  },
  {
    name: '361°',
    imageUrl: 'https://picsum.photos/200/100?random=7',
    link: 'https://www.361sport.com'
  },
  {
    name: '鸿星尔克',
    imageUrl: 'https://picsum.photos/200/100?random=8',
    link: 'https://www.erke.com'
  },
  {
    name: '彪马',
    imageUrl: 'https://picsum.photos/200/100?random=9',
    link: 'https://www.puma.com'
  },
  {
    name: '斯凯奇',
    imageUrl: 'https://picsum.photos/200/100?random=10',
    link: 'https://www.skechers.com'
  }
]);

// 自定义控制相关
const customCarousel = ref(null);
const isAutoPlaying = ref(false);

// 品牌点击事件
const handleBrandClick = (data) => {
  console.log('品牌点击:', data);
  // 可以在这里处理跳转到品牌链接等操作
  if (data.brand.link) {
    window.open(data.brand.link, '_blank');
  }
};

// 自定义控制方法
const prevSlide = () => {
  customCarousel.value?.prevSlide();
};

const nextSlide = () => {
  customCarousel.value?.nextSlide();
};

const goToSlide = (index) => {
  customCarousel.value?.goToSlide(index);
};

const toggleAutoPlay = () => {
  if (isAutoPlaying.value) {
    customCarousel.value?.stopAutoPlay();
  } else {
    customCarousel.value?.startAutoPlay();
  }
  isAutoPlaying.value = !isAutoPlaying.value;
};
</script>

<style scoped>
.brand-demo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.demo-section {
  margin-bottom: 50px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.demo-section h2 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #333;
}

.custom-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
  flex-wrap: wrap;
}

.custom-controls button {
  padding: 8px 16px;
  background: #6b46c1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.custom-controls button:hover {
  background: #553c9a;
}
</style>